<template>
  <view class="preson-item">
    <view class="preson-item-flex">
      <view>
        <TImage
          :src="data?.avatar"
          width="128rpx"
          height="128rpx"
          borderRadius="8rpx"
          error-img-type="person"
        ></TImage>
      </view>
      <view class="info">
        <view class="name-position">
          <view class="name-box">
            <text class="name text-overflow-1">{{ data?.userName }}</text>
            <CustomTag
              v-if="data?.memberLevelName"
              :text="data?.memberLevelName"
              background-color="linear-gradient(90deg, #FDEDC7 0.12%, #F7D9A2 100%)"
              color="#EA5E0E"
              padding="2rpx 12rpx"
            ></CustomTag>
          </view>
          <view class="to-record" @click="toDetail">
            <text>{{ dateUtil().to(dateUtil(data?.updateTime)) }}浏览</text>
            <text class="ali-icon icon-you1"></text>
          </view>
        </view>
        <view class="company-position">
          <text class="company" style="color: #333">{{ data?.companyName }}</text>
          <text class="position">{{ data?.companyPositionName }}</text>
        </view>
        <view v-if="data?.orgName" style="color: #969799; font-size: 24rpx">
          来源于：{{ data?.orgName }}
        </view>
        <view class="num">
          <view>
            <CustomTag
              v-if="applyStatus"
              :text="applyStatus.text"
              :background-color="applyStatus.bgColor"
              :color="applyStatus.color"
              :border="applyStatus.border"
              padding="2rpx 12rpx"
            ></CustomTag>
          </view>

          <text>浏览{{ data?.num }}次</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import { computed, type PropType } from 'vue';
  import { dateUtil } from '@/utils/dateUtil';
  import { navigateTo } from '@/router';
  import type { IPromotionBrowseRecord } from '@/api/businessOpportunities/type';
  import { IntentionStatusEnum } from '@/enums/businessOpportunitiesEnum';
  const props = defineProps({
    data: {
      type: Object as PropType<IPromotionBrowseRecord>,
    },
  });

  const emits = defineEmits(['toDetail']);

  const toDetail = () => {
    emits('toDetail');
  };

  const applyStatus = computed(() => {
    if (props.data?.applyStatus === undefined) {
      return null;
    }
    return {
      [IntentionStatusEnum.pending]: {
        text: '已提交意向',
        color: '#2878FF',
        bgColor: '#fff',
        border: '1px solid  #2878FF',
      },
      [IntentionStatusEnum.hold]: {
        text: '已搁置',
        color: '#333333',
        bgColor: '#F2F3F5',
        border: 'none',
      },
      [IntentionStatusEnum.success]: {
        text: '已联系',
        color: '#FFFFFF',
        bgColor: '#2878FF',
        border: 'none',
      },
      [IntentionStatusEnum.unsuitable]: {
        text: '不合适',
        color: '#333333',
        bgColor: '#F2F3F5',
        border: 'none',
      },
    }[props.data.applyStatus];
  });
</script>
<style lang="scss" scoped>
  .preson-item {
    background-color: #ffffff;
    padding: 24rpx;
    border-radius: 16rpx;

    .preson-item-flex {
      display: flex;
      gap: 16rpx;
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;
        .name-position {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 16rpx;
          .name-box {
            display: flex;
            gap: 16rpx;
            .name {
              color: #333;
              font-size: 32rpx;
              font-weight: 700;
              line-height: 48rpx;
            }
          }

          .to-record {
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 8rpx;
            color: #969799;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 32rpx;
          }
        }
        .company-position {
          display: flex;
          align-items: center;
          gap: 16rpx;
          flex-wrap: wrap;
          color: #969799;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
          .position {
            white-space: nowrap;
          }
        }
        .num {
          margin-top: 8rpx;
          display: flex;
          justify-content: space-between;
          color: #969799;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
          align-items: center;
        }
      }
    }
  }
</style>
